<!--  -->
<template>
  <!-- :class="{ consumptionFixed: isPageFixed }" -->
  <div class="content">
    <div id="consumption" ref="container">
      <div class="consumption-page" id="consumption-page" ref="consumptionPage" :style="{ '--tagBgColor': tagBgColor }">
        <van-sticky :container="container" offset-top="0">
          <van-tabs
            :sticky="btnFlag"
            :active="tabIndex"
            @click="onTabChange"
            :title-active-color="datas.tab_active_color"
            :color="datas.tab_active_color"
            :title-inactive-color="datas.tab_color"
            custom-class="self-tabs-custom-class"
            tab-class="coupon-tabs"
            :ellipsis="false"
          >
            <block v-for="(item, index) in tabs" :key="index">
              <van-tab :title="item.name" v-if="item.status" title-style="padding:0 0.3125rem;"> </van-tab>
            </block>
          </van-tabs>
        </van-sticky>
      </div>
      <div @click="scrollTo">
        <van-sticky v-if="!stickyRefresh" :container="container" :offset-top="44" z-index="9999" id="consumer">
          <van-dropdown-menu>
            <van-dropdown-item id="city" v-model="cityValue" :options="addressData" @change="onCityChange" @opened="onLocation" />
            <van-dropdown-item v-model="query.order_by" :options="distance" @change="onDistanceChange" />
            <van-dropdown-item :title="classifyValue" ref="item" id="item">
              <div class="drop-down-list flex">
                <div class="drop-left">
                  <div :class="categoryIndex === 0 ? 'angle' : categoryIndex === -1 ? 'on' : ''" @click.stop="categoryAllOn(-1)">全部推荐</div>
                  <block v-for="(item, index) in categoryList" :key="index">
                    <div
                      :class="categoryIndex === index ? 'on' : item.id === lastClassId ? 'angle' : item.id === nextClassId ? 'bottom-angle' : ''"
                      @click.stop="categoryOn({ index: index, id: item.id, name: item.name, children: item.has_many_children })"
                    >
                      {{ item.name }}
                    </div>
                  </block>
                </div>
                <div class="drop-content flex">
                  <div class="drop-secondLevel">
                    <div :class="styleTwoIndex === -1 ? 'on' : ''" @click.stop="firstAllOn(-1)" v-if="firstId">全部推荐</div>
                    <block v-for="(item, index) in secondArr" :key="index">
                      <div :class="styleTwoIndex === index ? 'on' : ''" @click.stop="secondOn({ index: index, id: item.id, name: item.name, children: item.has_many_children })">
                        {{ item.name }}
                      </div>
                    </block>
                  </div>
                  <div class="drop-secondLevel">
                    <div :class="styleThreeIndex === -1 ? 'on' : ''" @click="threeAllOn(-1)" v-if="secondId">全部推荐</div>
                    <block v-for="(item, index) in threeArr" :key="index">
                      <div :class="styleThreeIndex === index ? 'on' : ''" @click.stop="threeOn({ index: index, id: item.id, name: item.name, children: item.has_many_children })">
                        {{ item.name }}
                      </div>
                    </block>
                  </div>
                </div>
              </div>
            </van-dropdown-item>
          </van-dropdown-menu>
        </van-sticky>
      </div>
      <div>
        <div :style="`backgroundColor:${datas.preview_color};`">
          <consumption-goodsList :goodsData="couponGoodsListData" :decoration="datas" :love="love" :point="point"></consumption-goodsList>
          <div>
            <div class="loadMore" v-if="isLoadMore && couponGoodsListData.length > 0" @click="getMoreData">
              {{ $i18n.t("加载更多") }}
            </div>
            <div class="loadMore" v-if="lastIndex == index && allLoaded">{{ $i18n.t("没有更多了") }}~~</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import consumptionGoodsList from "./consumptionGoodsList";
import district from "/public/static/app/gov_province_city_area_id";
// import { scrollMixin } from "../../../utils/mixin";
export default {
  components: {
    consumptionGoodsList
  },
  props: {
    datas: {
      type: null
    },
    fixedTop: {
      type: Boolean,
      default: false
    },
    isBottom: {
      type: null
    },
    lastIndex: {
      type: null
    },
    isLast: {
      type: null
    },
    showDropdownMenu: {
      type: Boolean,
      default: false
    },
    bottomShowBolIndex: {
      type: null
    },
    index: {
      type: null
    },
    btnFlag: {
      type: null
    },
    pageScrollTopV: {
      type: null,
      default: 0
    }
  },
  name: "",
  //import引入的组件需要注入到对象中才能使用
  data() {
    return {
      district: district,
      tabIndex: 0,
      navbarInitTop: 0, //距离顶部的距离
      tabs: [],
      arrIndex: 1, //组件加载下一页
      language: "",
      perPage: 15, //每页多少条数据
      couponGoodsList: [], //商品信息
      couponGoodsListData: [],
      list: [], //商品加载
      isLoadMore: true,
      allLoaded: false, //全部数据加载完成
      per_page: 15,
      //分类查询信息
      query: {
        basic_info: 1,
        page: 1,
        longitude: "",
        latitude: "",
        order_by: "distance",
        search: {
          is_recommand: 0,
          province_id: 0,
          city_id: 0,
          district_id: 0,
          street_id: 0,
          is_free: 0, //是否霸王餐
          is_group: 0, //是否拼团商品
          is_new: 0, //是否新品
          category_ids: [], //装修接口返回的分类ID，一维数组
          category_id: 0 //分类ID
        }
      },
      love: "",
      point: "",
      total_page: 0,
      //选择的地址信息
      cityId: "",
      provinceData: [],
      cityData: [],
      districtData: [],
      addressData: [
        {
          text: "全国",
          value: 0
        }
      ],
      distance: [
        {
          text: "距离优先",
          value: "distance"
        },
        {
          text: "人气优先",
          value: "visit_count"
        },
        {
          text: "上新优先",
          value: "start_time"
        }
      ],
      //全部分类信息
      lastClassId: 0, //分类classId
      nextClassId: 0, //分类nextClassId
      firstId: 0, //获取分类的全部推荐二级
      secondId: 0,
      categoryList: [], //一级分类
      secondArr: [], //二级分类
      threeArr: [],
      categoryIndex: 0, //一级分类索引
      secondIndex: 0,
      threeIndex: 0,
      styleTwoIndex: null,
      styleThreeIndex: null,
      //下拉菜单筛选的值
      cityValue: 0,
      classifyValue: "全部分类",

      tagBgColor: "#ffffff",
      container: null, //指定dropMenu组件的容器
      isFixed: false,
      isPageFixed: false,
      stickyRefresh: false, //切换时隐藏下拉框
      locationStatus: false
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    // "datas.list.current_page"(newValue, oldValue) {
    //   if (this.childComponent == "tab") {
    //     this.total_page = this.datas.list.last_page;
    //     this.query.page = this.datas.list.current_page;
    //   }
    // },
    isBottom: function(newVal, oldVal) {
      // this.lastIndex == this.index判断商品列表是最后一个组件
      if (newVal && this.lastIndex == this.index && this.isLoadMore) {
        this.getMoreData();
      } else if (this.query.page >= this.total_page) {
        if (this.couponGoodsList.slice(this.per_page * this.arrIndex).length > 0) {
          this.couponGoodsListData = this.couponGoodsListData.concat(this.couponGoodsList.slice(this.per_page * this.arrIndex, this.per_page * (this.arrIndex + 1))); //数组拼接
          this.arrIndex = this.arrIndex + 1;
        }
      }
    }
  },
  //方法集合
  methods: {
    scrollTo() {
      this.$nextTick(() => {
        document.getElementById("consumption-page").scrollIntoView();
      }, 1000);
    },
    goodsCategoryList() {
      $http.post("plugin.coupon-store.frontend.category.goodsCategoryList", {}, "正在获取").then(
        response => {
          if (response.result == 1) {
            let res = response.data;
            let list = res.list;
            let secondArr = [];
            let threeArr = [];
            if (list[this.categoryIndex] && list[this.categoryIndex].has_many_children && list[this.categoryIndex].has_many_children.length > 0) {
              //查询下面数组赋值给2级菜单显示
              secondArr = list[this.categoryIndex].has_many_children;
            }
            if (list[this.categoryIndex] && list[this.categoryIndex].has_many_children && list[this.categoryIndex].has_many_children.length > 0) {
              //查询下面数组赋值给3级菜单显示
              threeArr = secondArr[this.secondIndex].has_many_children;
            }
            if (this.firstId === 0) {
              this.firstId = list[0].id;
            }
            this.categoryList = list;
            this.secondArr = secondArr;
            this.threeArr = threeArr;
            this.catLevel = res.cat_level;
          } else {
            this.$dialog.alert({ message: response.msg });
          }
        },
        function(response) {
          // console.log(response);
          // error callback
        }
      );
    },
    orderCouponList() {
      let json = this.query;
      $http.post("plugin.coupon-store.frontend.goods.index", json, "正在获取").then(
        response => {
          if (response.result == 1) {
            let res = response.data;
            let list = res.data || [];
            if (this.datas.num_set === "2" && list.length > this.datas.get_number) {
              this.couponGoodsListData = list.slice(0, this.datas.get_number);
              this.isLoadMore = false;
              this.allLoaded = true;
            } else {
              this.couponGoodsList = list;
              this.couponGoodsListData = list;
              if (list.length > 0) {
                this.isLoadMore = true;
              } else {
                this.isLoadMore = false;
              }
              if(this.query.page >= res.last_page) {
                this.isLoadMore = false;
              }
              this.allLoaded = false;
            }
            this.total_page = res.last_page;
            this.love = response.basic_info?.love;
            this.point = this.fun.getCustomTextLang('member_center.credit1','积分');
          } else {
            this.$dialog.alert({ message: response.msg });
            this.isLoadMore = false;
            this.allLoaded = true;
          }
        },
        function(response) {
          // console.log(response);
          // error callback
        }
      );
    },
    categoryAllOn() {
      this.categoryIndex = -1;
      this.lastClassId = 0;
      this.nextClassId = 0;
      this.secondId = 0;
      this.classifyValue = "全部推荐";
      this.query.search.category_id = 0;
      this.orderCouponList();
      this.$refs.item.toggle(false);
    },
    firstAllOn() {
      this.styleTwoIndex = -1;
      this.query.search.category_id = this.firstId;
      this.classifyValue = "全部推荐";
      this.orderCouponList();
      this.$refs.item.toggle(false);
    },
    threeAllOn() {
      this.styleThreeIndex = -1;
      this.query.search.category_id = this.secondId;
      this.classifyValue = "全部推荐";
      this.orderCouponList();
      this.$refs.item.toggle(false);
    },
    categoryOn(...query) {
      let { index, id, name, children } = [...query][0];
      this.getAdjacentInfo(index);
      if (this.categoryIndex !== index) {
        this.goodsCategoryList();
      }
      this.categoryIndex = index;
      this.secondIndex = 0;
      this.styleTwoIndex = null;
      this.styleThreeIndex = null;

      if (Array.isArray(children) && children.length === 0) {
        //判断是否没有子级，没有子级就传一级ID并且关闭弹窗
        this.query.search.category_id = id;
        this.$refs.item.toggle(false);

        this.classifyValue = name;
        this.orderCouponList(); //首页商品数据
      }
      this.secondId = 0;
      this.firstId = id;
    },
    secondOn(...query) {
      let { index, id, name, children } = [...query][0];
      if ((Array.isArray(children) && children.length === 0) || this.catLevel === "2") {
        //判断是否没有子级，没有子级就传一级ID并且关闭弹窗
        this.query.search.category_id = id;
        this.$refs.item.toggle(false);
        this.classifyValue = name;
        this.orderCouponList(); //首页商品数据
      }
      if (this.secondIndex !== index) {
        //避免重复选择一个分类重复请求
        this.goodsCategoryList();
      }
      this.secondIndex = index;
      this.styleTwoIndex = index;

      this.secondId = id;
    },
    threeOn(...query) {
      let { index, id, name } = [...query][0];
      this.threeIndex = index;
      this.styleThreeIndex = index;
      this.classifyValue = name;
      this.query.search.category_id = id;
      this.$refs.item.toggle(false);
      this.goodsCategoryList();
      this.orderCouponList(); //首页商品数据
    },
    // 当前选中类目，相邻圆角样式所需信息
    getAdjacentInfo(index) {
      if (this.categoryList[index - 1]) {
        this.lastClassId = this.categoryList[index - 1].id;
        this.nextClassId = this.categoryList[index + 1]?.id || 0;
      } else {
        this.nextClassId = this.categoryList[index + 1].id || 0;
      }
      index === 0 ? (this.lastClassId = 0) : this.lastClassId; //避免选择第一个导致之前的样式还存在
    },
    onTabChange(index) {
      //获取tab的分类
      this.stickyRefresh = true;
      this.isTabActions(this.tabs[index].status);
      this.query.page = 1;
      this.arrIndex = 1;

      // this.container = this.$refs.container;
      this.orderCouponList(); //首页商品数据
      setTimeout(() => {
        this.stickyRefresh = false;
      }, 1000);
    },
    isTabActions(status) {
      const actions = new Map([
        [
          { [status]: 1 },
          () => {
            this.query.search.is_recommand = 1;
            this.query.search.is_free = 0;
            this.query.search.is_group = 0;
            this.query.search.is_new = 0;
            this.query.search.category_ids = [];
          }
        ],
        [
          { [status]: 2 },
          () => {
            let datas = this.datas;
            let categoryIds = datas.list.map(item => {
              return item.id;
            });
            this.query.search.is_recommand = 0;
            this.query.search.is_free = 0;
            this.query.search.is_group = 0;
            this.query.search.is_new = 0;
            this.query.search.category_ids = categoryIds;
          }
        ],
        [
          { [status]: 3 },
          () => {
            this.query.search.is_recommand = 0;
            this.query.search.is_free = 1;
            this.query.search.is_group = 0;
            this.query.search.is_new = 0;
            this.query.search.category_ids = [];
          }
        ],
        [
          { [status]: 4 },
          () => {
            this.query.search.is_recommand = 0;
            this.query.search.is_free = 0;
            this.query.search.is_group = 1;
            this.query.search.is_new = 0;
            this.query.search.category_ids = [];
          }
        ],
        [
          { [status]: 5 },
          () => {
            this.query.search.is_recommand = 0;
            this.query.search.is_free = 0;
            this.query.search.is_group = 0;
            this.query.search.is_new = 1;
            this.query.search.category_ids = [];
          }
        ]
      ]);
      let action = [...actions].filter(
        //筛选对应的map数组
        ([key, value]) => {
          return status === key[status];
        }
      );
      action.forEach(([key, value]) => {
        //遍历map的数组执行里面的匿名函数
        value.call(this);
      });
    },
    onLocation() {
      //定位失败，获取新的定位
      if (this.cityId === "") {
        this.fun
          .getLocation()
          .then(res => {
            this.cityValue = res.addressComponent.adcode;
            this.locationStatus = true;
            this.addressCodeInfo();
          })
          .catch(err => {
            console.log(err);
            this.locationStatus = false;
          });
      }
    },
    addressCodeInfo() {
      //截取定位的地址
      let cityCode = this.cityValue;
      let interceptionId = cityCode.toString().slice(0, 2); //截取为省的标识符
      let interceptionCity = cityCode.toString().slice(0, 4);
      let provinceId = district.find(item => {
        //筛选为市的地址
        let id = item["v"].toString();
        // let id = item["id"].toString();
        return id.indexOf(interceptionId) !== -1;
      });
      let cityId = provinceId["c"].find(item => {
        //筛选为市的地址
        let id = item["v"].toString();
        return id.indexOf(interceptionCity) !== -1;
      });
      let districtArr = cityId["c"];
      districtArr.forEach(item => {
        this.addressData.push({
          text: item.n,
          value: item.v
        });
      });
      this.cityValue = cityId.v;
      this.cityId = cityId.v;
      this.addressData[0].value = cityId.v;
      this.addressData[0].text = cityId.n;
    },

    onDistanceChange(detail) {
      this.query.order_by = detail;
      this.orderCouponList(); //首页商品数据
    },
    onCityChange(detail) {
      if (Number(this.cityId) === Number(detail)) {
        //通过cityID去区别市还是区
        this.query.search.city_id = detail;
        this.query.search.district_id = 0;
      } else {
        this.query.search.district_id = detail;
      }
      this.orderCouponList(); //首页商品数据
    },

    // 获取更多数据
    getMoreData() {
      if (this.couponGoodsList.slice(this.per_page * this.arrIndex).length >= this.per_page) {
        // 一页的数据超过per_page不另外请求接口
        this.couponGoodsListData = this.couponGoodsListData.concat(this.couponGoodsList.slice(this.per_page * this.arrIndex, this.per_page * (this.arrIndex + 1))); //数组拼接
        this.arrIndex = this.arrIndex + 1;

        if (this.datas.num_set === "2" && this.couponGoodsListData.length > this.datas.get_number) {
          this.couponGoodsListData = this.couponGoodsListData.slice(0, this.datas.get_number);
          this.isLoadMore = false;
          this.allLoaded = true;
        }
        return;
      } else if (this.query.page >= this.total_page && this.couponGoodsList.slice(this.per_page * this.arrIndex).length > 0) {
        // 最后一页剩余的数据加载
        this.couponGoodsListData = this.couponGoodsListData.concat(this.couponGoodsList.slice(this.per_page * this.arrIndex, this.per_page * (this.arrIndex + 1)));
        if (this.datas.num_set === "2" && this.couponGoodsListData.length > this.datas.get_number) {
          this.couponGoodsListData = this.couponGoodsListData.slice(0, this.datas.get_number);
        }

        this.isLoadMore = false;
        this.allLoaded = true;

        return;
      }
      this.isLoadMore = false;
      if (this.query.page >= this.total_page) {
        if (this.couponGoodsList.slice(this.per_page * this.arrIndex).length > 0) {
          // 最后一页剩余的数据加载
          this.couponGoodsListData = this.couponGoodsListData.concat(this.couponGoodsList.slice(this.per_page * this.arrIndex, this.per_page * (this.arrIndex + 1)));
          if (this.datas.num_set === "2" && this.couponGoodsListData.length > this.datas.get_number) {
            this.couponGoodsListData = this.couponGoodsListData.slice(0, this.datas.get_number);
          }

          this.isLoadMore = false;
          this.allLoaded = true;
        }
      } else {
        this.query.page = this.query.page + 1;
        let json = this.query;
        $http.post("plugin.coupon-store.frontend.goods.index", json, "正在获取").then(
          response => {
            if (response.result === 1) {
              this.query.page = response.data.current_page || this.query.page;
              this.couponGoodsList = this.couponGoodsList.concat(response.data.data);
              this.couponGoodsListData = this.couponGoodsListData.concat(this.couponGoodsList.slice(this.per_page * this.arrIndex, this.per_page * (this.arrIndex + 1))); //数组拼接
              this.arrIndex = this.arrIndex + 1;
              if (this.couponGoodsList.slice(this.per_page * this.arrIndex).length > 0 || this.query.page < this.total_page) {
                // 判断是否最后一页  和 是否数据都加载完
                this.isLoadMore = true;
              } else {
                this.allLoaded = true;
              }

              if (this.datas.num_set === "2" && this.couponGoodsListData.length > this.datas.get_number) {
                this.couponGoodsListData = this.couponGoodsListData.slice(0, this.datas.get_number);
                this.isLoadMore = false;
                this.allLoaded = true;
              }
            } else {
              this.query.page = this.query.page - 1;
              this.isLoadMore = false;
              this.allLoaded = true;
            }
          },
          function(response) {
            console.error(response);
            // error callback
          }
        );
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // let language = localstorage.getItem("langIndex");
    // console.log(language);
    // this.language = language.en;
    let tabsTitle = ["diy_title_1", "diy_title_2", "diy_title_3", "diy_title_4", "diy_title_5"];
    let tabs = this.tabs;
    let datas = this.datas;
    for (let i in tabsTitle) {
      tabs.push({
        name: datas[tabsTitle[i]],
        status: Number(i) + 1 //对应后端传显示的tab数组
      });
    }
    let tabsList = tabs.filter(item => datas["tab_list"].some(ele => ele === String(item.status))); //筛选出显示的tab数组
    this.tabs = tabsList;
    this.tagBgColor = datas.tab_bg_color;
    this.isTabActions(this.tabs[0].status);
    this.goodsCategoryList();

    this.container = this.$refs.container;

    this.fun
      .getLocation()
      .then(res => {
        let p = this.fun.bd_encrypt(res.point.lng, res.point.lat);
        this.cityValue = res.addressComponent.adcode;
        let interceptionCity = this.cityValue.toString().slice(0, 4) + "00";
        this.query.search.city_id = Number(interceptionCity);
        this.query.latitude = p.lat;
        this.query.longitude = p.lng;
        this.locationStatus = true;
        this.addressCodeInfo();
        this.orderCouponList();
      })
      .catch(err => {
        console.log(err);
        this.locationStatus = false;
      });
  },

  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  deactivated() {},
  activated() {
    this.query.page = 1;
    this.query.search.district_id = '';
    this.fun
      .getLocation()
      .then(res => {
        let p = this.fun.bd_encrypt(res.point.lng, res.point.lat);
        this.cityValue = res.addressComponent.adcode;
        let interceptionCity = this.cityValue.toString().slice(0, 4) + "00";
        this.query.search.city_id = Number(interceptionCity);
        this.query.latitude = p.lat;
        this.query.longitude = p.lng;
        this.locationStatus = true;
        this.addressCodeInfo();
        this.orderCouponList();
      })
      .catch(err => {
        console.log(err);
        this.locationStatus = false;
      });
  } //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
#appMain .pcStyle ::v-deep .van-popup {
  top: auto;
}

#consumption-page ::v-deep .van-tabs .van-sticky {
  z-index: 9 !important;
}

/* .consumption-page ::v-deep .van-dropdown-item__content {
  top: 188px !important;
} */
</style>
<style lang="scss" scoped>
#consumption-page::v-deep .van-tabs .van-tabs__nav {
  background-color: var(--tagBgColor);
}

/* @import url(); 引入公共css类 */
.consumption-page {
  position: relative;
}

.loadMore {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  clear: both;
}

.fixed {
  position: fixed;

  /* position: sticky; */
  top: 2.75rem;
  z-index: 99;
  background: #fff;
  width: 100%;
  height: auto;
}

.consumptionFixed {
  top: 0;
  position: fixed;
  z-index: 99;
  background: #fff;
  width: 100%;
  height: auto;
}

.consumption-page .coupon-tabs {
  padding: 0;

  /* margin: 0 0.3125rem; */
}

.drop-down-list {
  height: 18.75rem;
  overflow-y: scroll;

  .drop-left {
    max-width: 8.0938rem;
    width: 8.0938rem;
    max-height: inherit;

    /* border-radius:0 0.625rem 0 0.625rem; */
    box-sizing: border-box;
    font-size: 0.875rem;
    color: #222;

    /* border-top-left-radius:0.625rem; */

    /* background-color: #f4f4f4; */
  }
}

.drop-left div {
  padding: 0.6875rem 0 0.6875rem 0.9375rem;
  background-color: #f4f4f4;

  :nth-child(1) {
    border-top-right-radius: 0.625rem;
  }
}

.drop-down-list .drop-left .on {
  background-color: #fff;
  color: #ff3a00;
  position: relative;
}

.corner {
  width: 0.75rem;
  height: 0.75rem;
  position: absolute;
  background: #fff;
  display: none;
}

.bottom-corner {
  position: absolute;
  top: 100%;
  right: 0;
}

.top-corner {
  position: absolute;
  bottom: 100%;
  right: 0;
}

.drop-down-list {
  .drop-left {
    .angle {
      border-bottom-right-radius: 0.625rem;
      background-color: #f4f4f4;
    }

    .bottom-angle {
      border-top-right-radius: 0.625rem;
    }
  }

  .drop-content {
    width: calc(100% - 8.0938rem);

    .drop-secondLevel {
      max-width: 8.0938rem;
      width: 8.0938rem;
      box-sizing: border-box;
      font-size: 0.875rem;
      color: #222;
    }
  }
}

.drop-secondLevel .on {
  color: #ff3a00;
}

.drop-content .drop-secondLevel div {
  padding: 0.6875rem 0 0.6875rem 0.9375rem;
}
</style>
